
import React, { useState, useEffect, useRef } from "react";
import { DatePicker, Space } from 'antd';
import 'dayjs/locale/zh-cn';
import Bar from "@/component/echarts/Bar/bar-1";
import dayjs from "dayjs";
import { homeApi } from "@/api";
dayjs.locale('en', {
    // 注意请修改你正在使用的 locale 语言，比如 zh-cn
    week: {
        dow: 1,
    },
});
const { RangePicker } = DatePicker;
function AchTrend() {
    const [dateList, setDatelist] = useState([dayjs(), dayjs()]);
    const [dataType, setDataType] = useState("today");
    const [activeDateBtn, seActiveDateBtn] = useState(1);
    const [xData, setXdata] = useState(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'])
    const [yData, setYdata] = useState([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,])



    //根据传入的startDateTime和endDateTime去查询访客趋势
    const getAchTrend = async (startDateTime, endDateTime, type) => {
        const { data, code, msg } = await homeApi.queryVistorlistByDay({
            startDateTime: startDateTime,
            endDateTime: endDateTime,
            dateType: type
        })
        if (data && data.length > 0) {
            setXdata(data.map((item) => dayjs(item._id).format("MM-DD")))
            setYdata(data.map((item) => item.uvCount))
        }
    }

    // 监听条件变化 
    useEffect(() => {

        // if (dataType === 1) {
        //     console.log('切换显示成交量')
        //     setYdata([320, 410, 530, 30, 440, 50, 350, 410, 50, 370, 460, 550,])
        // } else {
        //     console.log('切换显示订单量')
        //     setYdata([30, 40, 50, 30, 40, 50, 30, 40, 50, 30, 40, 50,])
        // }

        getAchTrend(dayjs(dateList[0]).format("YYYY-MM-DD 00:00:00"), dayjs(dateList[1]).format("YYYY-MM-DD 23:59:59"), dataType)
    }, [dateList, dataType])

    // 快速选择日期范围事件
    const selectDateRange = (type) => {
        switch (type) {
            case 1:
                // setDatelist([dayjs(), dayjs()]);
                getAchTrend(dayjs().startOf('day'), dayjs().endOf('day'), type);
                break;
            case 2:
                // setDatelist([dayjs().startOf('week'), dayjs().endOf('week')]);
                getAchTrend(dayjs().startOf('week'), dayjs().endOf('week'), type)
                break;
            case 3:
                // setDatelist([dayjs().startOf('month'), dayjs().endOf('month')]);
                getAchTrend(dayjs().startOf('month'), dayjs().endOf('month'), type)
                break;
            case 4:
                // setDatelist([dayjs().startOf('year'), dayjs().endOf('year')]); break;
                getAchTrend(dayjs().startOf('year'), dayjs().endOf('year'), type);
            default:
        }
        seActiveDateBtn(type)
    }

    // 手动变更日期范围
    const onChange = (dates, dateStrings) => {
        if (dates) {
            // console.log('From: ', dates[0], ', to: ', dates[1]);
            setDatelist(dates)
            // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);//From:  2023-06-03 , to:  2023-06-21
        } else {
            // console.log('Clear');
        }
    };







    return (
        <>
            <div className="achtrend">
                <div className="achtrend-head">
                    <div className="acthrend-container">
                        <div className="left">
                            <span onClick={() => setDataType(1)} className={dataType === 1 ? 'btn active' : 'btn'}  >访问量</span>
                            {/* <span onClick={() => setDataType(2)} className={dataType === 2 ? 'btn active' : 'btn'}>订单量</span> */}
                        </div>
                        <div className="right">
                            <span onClick={() => { selectDateRange("today"); seActiveDateBtn(1) }} className={activeDateBtn === 1 ? 'btn active' : 'btn'}>今日</span>
                            <span onClick={() => { selectDateRange("week"); seActiveDateBtn(2) }} className={activeDateBtn === 2 ? 'btn active' : 'btn'}  >本周</span>
                            <span onClick={() => { selectDateRange("month"); seActiveDateBtn(3) }} className={activeDateBtn === 3 ? 'btn active' : 'btn'}  >本月</span>
                            {/* <span onClick={() => selectDateRange(4)} className={activeDateBtn === 4 ? 'btn active' : 'btn'} >本年</span> */}
                            <span className="btn" style={{ width: 'auto' }}>
                                <RangePicker
                                    onClick={(e) => { e.stopPropagation(); selectDateRange("myuse"); seActiveDateBtn(4) }}
                                    defaultPickerValue={dateList}
                                    defaultValue={dateList}
                                    value={dateList}
                                    format="YYYY-MM-DD"
                                    onChange={onChange} />
                            </span>
                        </div>
                    </div>

                </div>
                <div className="center-box">
                    <div className="achtrend-center">
                        <div className="left">
                            <Bar title='访客趋势'
                                xData={xData}
                                yData={yData}
                                style={{ width: '100%', height: '100%' }}
                            />
                        </div>
                        <div className="right">
                            <div className="title">内容访问排行榜</div>
                            <ul>
                                <li>
                                    <span className="number">1</span>
                                    <span className="name">张三李四王五没钱了啊</span>
                                    <span className="amount">19,993</span>
                                </li>
                                <li>
                                    <span className="number">2</span>
                                    <span className="name">张三李四王五没钱了啊</span>
                                    <span className="amount">19,993</span>
                                </li>
                                <li>
                                    <span className="number">3</span>
                                    <span className="name">张三李四王五没钱了啊</span>
                                    <span className="amount">19,993</span>
                                </li>
                                <li>
                                    <span className="number">4</span>
                                    <span className="name">张三李四王五没钱了啊</span>
                                    <span className="amount">19,993</span>
                                </li>
                                <li>
                                    <span className="number">5</span>
                                    <span className="name">张三李四王五没钱了啊</span>
                                    <span className="amount">19,993</span>
                                </li>


                            </ul>
                        </div>
                    </div>
                </div>

            </div>

        </>
    )
}
export default AchTrend;